<template>
	<view class="content">
		<u-bar-height></u-bar-height>
		
		<view class="back" @tap="back"><uni-icons type="left" size="26"></uni-icons></view>
		<uni-section class="title" :title="title"></uni-section>
		
		<u-top-pic class="top-pic" :list="album"></u-top-pic>
		
		<view class="play" @tap="play">
			<text class="iconfont icon-bofang_o"></text>
			<text class="">播放歌单</text>
		</view>
		
		<view class="box">
			<u-single-list :list="songs" :geDanFunctions="geDanFunctions" :loadStatus="loadStatus" :refs="ref" :show="true"></u-single-list>
		</view>
		
	</view>
</template>

<script>
	import util from '@/utils/util.js';
	import { mapGetters, mapMutations} from 'vuex'
	export default {
		data(){
			return {
				id: 0,
				title: '',
				album: [],
				songs: [],
				loadStatus: 'noMore',
				ref: 'playListPopup',
				geDanFunctions: [
					{text: '收藏', type: 'collection'},
					{text: '添加歌单', type: 'add'},
					{text: '查看歌手', type: 'select'}
				],
				
			}
		},
		
		onLoad(option) {
			this.id = option.id;
			this.getSongSheetList(this.id);
		},
		
		methods: {
			...mapMutations({
				setPlaying: 'SET_PLAYING',
			 }),
			 
			back(){
				util.jump('navigateBack', '');
			},
			
			getSongSheetList(id){
				let songSheet = JSON.parse(util.getStorageSync('songSheet'));
				songSheet.some(val => {
					if(val.id == id){
						val.createTime = util.formatDate(val.createTime)
						this.album = val;
						this.title = val.name;
					}
				});
				
				let songSheetList = JSON.parse(util.getStorageSync('songSheetList'));
				songSheetList.some(val => {
					for(let k in val){
						if(k == id){
							this.songs = val[k];
						}
					}
				});
			},
			
			play(){
				let item = [];
				for(let k in this.songs){
					let obj = {};
					obj['id'] = this.songs[k].id;
					obj['name'] = this.songs[k].name;
					obj['singer'] = this.songs[k].ar[0].name;
					obj['singerID'] = this.songs[k].ar[0].id;
					obj['picUrl'] = this.songs[k].al.picUrl;
					obj['isPlay'] = false;
					obj['songLyric'] = this.songs[k].songLyric;
					item.push(obj)
				}
				item[0].isPlay = true;
				// this.setPlaying(item[0]);
				console.log(item[0])
				uni.$emit('playingUpdata', item[0]);
				util.setStorageSync('songSheetPlayList', JSON.stringify(item));
				
				let data = {};
				data.name = this.album.title;
				data.picUrl = this.album.coverImgUrl;
				util.setStorageSync('songSheetInfo', JSON.stringify(data));
			}
		},
		
		onUnload(){
			uni.$emit('closePopup', this.ref);
		}
	}
</script>

<style scoped>
	@import url("@/static/css/iconfont.css");
	.back{
		padding: 8px;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 999;
	}
	
	.top-pic{
		width: 100%;
	}
	
	.title{
		width: 100%;
		text-align: center;
		font-size: 13px;
	}
	
	/* #ifdef H5 */
		.box{
			top: 190px !important;
		}
	/* #endif */
	
	.box{
		width: 100%;
		position: absolute;
		top: 240px;
		left: 0;
	}
	
	.play{
		z-index: 9;
		margin-top: 8%;
		color: #fff;
		font-size: 14px;
	}
	
	.play text:first-child {
		vertical-align: sub;
	}
</style>